<script setup lang="ts">
	import dialogCloseBtn from '@/static/owo/coupon-dialog-close.png';
	import CouponCard from '@/wxcomponents/coupon-card'
	import productInfoBanner from '@/static/owo/product-info-banner.png'

	defineProps<{
		image : string,
		name : string,
		price : string
	}>()

	const emit = defineEmits(['close'])

	function onClose() {
		emit('close')
	}
</script>

<template>
	<view class="coupon-dialog-content">
		<image class="bg" src="/static/owo/prize-dialog-bg.png" mode="aspectFit" />
		<image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" />

		<view class="nav-left"></view>
		<view class="nav-right"></view>
		<view class="txt">
			产品信息
		</view>
		<image class="prize-img" :src="image" mode="widthFix" />

		<!-- <image class="coupon-promo-title" :src="productInfoBanner" mode="widthFix" /> -->

		<view class="prize-info">
			<view class="info-row">
				<text style="width: 250rpx;">奖品名称：</text>
				<text>{{ name }}</text>
			</view>
			<view class="info-row" style="margin-top: 10rpx;">
				<text>售价：</text>
				<text>¥{{ price }}</text>
			</view>
		</view>
	</view>
</template>

<style>
	page {
		--dialog-background-color: transparent;
	}
</style>

<style scoped lang="scss">
	.nav-right {
		width: 36px;
		background-image: url('~@/static/owo/nav-arrow.png');
		background-size: contain;
		aspect-ratio: 1/1;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%;
		transform: rotate(180deg);
		right: 0;
	}

	.nav-left {
		width: 36px;
		background-image: url('~@/static/owo/nav-arrow.png');
		background-size: contain;
		aspect-ratio: 1/1;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%;
		left: 0;
	}

	.prize-info {
		width: 100%;
		padding: 19px 15px;
		// background-image: url('~@/static/owo/prize-info-bg.png');
		// background-size: contain;
		aspect-ratio: 548/194;
		// background-repeat: no-repeat;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.prize-info .info-row {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: medium;
		color: #FFFFFF;
	}

	.prize-img {
		width: 210px;
		height: 210px;
		margin: 0 auto;
	}

	.coupon-dialog-content {
		width: 500rpx;
		height: 600rpx;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60px;
		padding-left: 20px;
		padding-right: 20px;
		margin: 0 auto;
	}

	.txt {
		position: absolute;
		top: 0rpx;
		left: 30rpx;
		color: #CB7621;
		font-size: 22rpx;
		line-height: 70rpx;
		height: 70rpx;
	}

	.coupon-dialog-content .bg {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	.coupon-dialog-content .close-btn {
		position: absolute;
		top: 15px;
		right: 10px;
		width: 20px;
		height: 20px;
	}

	.coupon-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.coupon-promo-title {
		width: 196px;
		margin: 12px auto 10px;
		display: block;
	}

	.coupon-confirm-btn {
		background-image: url('~@/static/coupon-confirm-btn.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 130px;
		height: 44px;
		margin: 26px auto 0;
	}
</style>